<template>
	<view class="container">
		<view class="avatar" v-if="hasLogin">
			<block v-if="userInfo.avatar">
				<image :src="`${tempUrl}${userInfo.avatar}`"></image>
			</block>
			<block v-else>
				<image src="../../static/default/default-avatar.png"></image>
			</block>

			<uni-icons @click="choosePhoto('avatar')" class="icon" type="camera-filled" size="20" color="#fff"></uni-icons>
			<view class="form-Content">
				<view class="form-item" v-for="item in formLabel" :key="item.index"
					@click="show=true;toSon(item.value)">
					<block>
						<view class="left">{{item.label}}</view>
						<view class="right">
							<block v-if="item.label=='性别'">
								<block v-if="userInfo[item.value]">
									{{userInfo[item.value]==0?"女":"男"}}
								</block>
								<block v-else>
									请选择性别
								</block>
							</block>

							<block v-else> {{userInfo[item.value]?userInfo[item.value]:"请填写名字"}}</block>
							<uni-icons type="right" size="20" color="#dedede"></uni-icons>
						</view>
					</block>
				</view>
				<view class="form-item" style="height: 200rpx;" @click="show=true;toSon('info')">
					<view class="left">简介</view>
					<view class="right article" style="justify-content: flex-end;">
						<view style="line-height: 2.5em; white-space:pre-line;text-align: right;white-space:pre-line;">
							<block v-if="userInfo.info">
								{{userInfo.info}}
							</block>
						</view>
						<uni-icons type="right" size="20" color="#dedede">
						</uni-icons>

					</view>
				</view>
				<view class="form-item" style="height: 150rpx;" @click="choosePhoto('bacimg')">
					<view class="left">背景图</view>
					<view class="right">
						<block v-if="userInfo.bacimg">
							<image :src="`${tempUrl}${userInfo.bacimg}`"></image>
						</block>
						<block v-else>
							<image src="../../static/default/default-bacimg.jpg"></image>
						</block>
						<uni-icons type="right" size="20" color="#dedede"></uni-icons>
					</view>

				</view>
			</view>
			<Screen :show='show' @close="close" :param="param" ></Screen>
		</view>

	</view>
</template>

<script>
	import Screen from "../Screen/Screen.vue";
	import {
		mapState,mapMutations
	} from 'vuex';
	import {baseUrl} from "@/common/js/request.js" 
	import {updateUser} from"@/api/upload.js"
	export default {
		components: {
			Screen
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				param: {},
				profile: {},
				show: false,
				formLabel: [{
						label: '昵称',
						value: 'name'
					},
					{
						label: '寻糖号',
						value: 'username'
					},
					{
						label: '性别',
						value: 'sex'
					}
				],
				tempUrl:`${this.baseUrl}`
			};
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['login']),
			choosePhoto(str) {
				const _this = this;
				uni.chooseImage({
					count: 1, //最多可以选择的图片张数，默认9
					// sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
					success(res) {
						console.log('选择图片完成', res)
						// 调用上传图片的接口
				        _this.uploadPhoto(res,str);
					},
					fail(err) {
						console.log('失败', err); 
					},
					complete() {
						console.log('结束');
					},
				})
			},
			uploadPhoto(res,str) {
				let temp=this.$store.state.userInfo;
				let _this=this;
				// let _str=str;
				uni.uploadFile({
					url: `${baseUrl}/uploadFile`, //开发者服务器 url
					header: {
						// HTTP 请求 Header, header 中不能设置 Referer
						
					},
					filePath: res.tempFilePaths[0], // 要上传文件资源的路径
					name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					formData: {
						file:res.tempFiles[0]
						// HTTP 请求中其他额外的 form data （即接口需要的其它参数）
					},
					success(res) {
						let result=JSON.parse(res.data)
						let that=_this;
						if(result.code==200){
							temp[str]=result.data;
							uni.request({
								url:`${baseUrl}/user/profile`,
								method:'put',
								data:temp,
								success(res) {
									if(res.data.code==200){
										that.$store.dispatch("updateUserInfo",res.data.data);
										that.$commonFunc.msg("上传成功")
									}
								},
								fail(err) {
									console.log('失败', err);
								},
							})	
						}
					},
					fail(err) {
						console.log('失败', err);
					},
					complete() {
						console.log('结束');
					},
				})
			},
			uploadFile(temp){
				// console.log(temp)
				// updateUser(temp).then(res=>{
				// 	console.log(res)
				// })
			},
			close(e) {
				this.show = e
			},
			toSon(val) {
				//赋值个人信息  把个人信息保存本地 vuex
				this.param = this.userInfo;
				this.param.type = val;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		width: 100vw;
		margin-top: 100rpx;
		text-align: center;
	}

	.avatar {
		position: relative;

		image {
			width: 260rpx;
			height: 260rpx;
			border-radius: 50%;
		}

		.icon {
			padding: 6rpx;
			background-color: #000;
			border-radius: 50%;
			position: absolute;
			right: calc(34vw);
			top: 200rpx;

		}
	}

	.form-Content {
		margin-top: 40rpx;
	}

	.form-item {
		background: none;
		transition: background 0.1s ease 0.1s;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 40rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: left;
		color: #303133;
		border-bottom: 2rpx solid #DCDCDC;

		.left {
			width: 100rpx;
			margin-right: 20rpx;
		}

		.right {
			font-size: 28rpx;
			text-align: right;
			flex: 8;
		}

		.unfill {
			color: #999;
		}

		.article {
			display: flex;
			align-items: center;
		}

		image {
			vertical-align: middle;
			border-radius: 20rpx;
			width: 130rpx;
			height: 100rpx;
		}
	}

	.transForm {
		background: rgba(#dcdcdc, 0.1);
	}
</style>
